import {computed, ref} from "vue";
import {PaginationConfig} from "ant-design-vue/es/pagination";

import usePrettyStore from "@/store/prettyModule";
import {IListItem} from "@/views/Pretty/Main/types";
import {PRETTY_LIST_DEFAULT_PAGE_SIZE} from "@/constants/data";

export const prettyStore = usePrettyStore()
// 表格加载效果
export const isLoading = ref(true)
// 数据
export const dataSource = computed(() => {
    return prettyStore.prettyInfo.list.map((item, index) => {
        const listItem: IListItem = {
            key: index,
            id: item.id,
            mobile: item.mobile,
            price: item.price,
            level: item.level,
            status: item.status,
        }
        return listItem
    })
})
// 列信息
export const columns = [
    {
        title: 'id',
        dataIndex: 'id',
        key: 'id',
        align: 'center'
    },
    {
        title: '手机号',
        dataIndex: 'mobile',
        key: 'mobile',
        align: 'center'
    },
    {
        title: '价格',
        dataIndex: 'price',
        key: 'price',
        align: "center"
    },
    {
        title: '靓号等级',
        dataIndex: 'level',
        key: 'level',
        align: "center"
    },
    {
        title: '状态',
        dataIndex: 'status',
        key: 'status',
        align: "center"
    },
    {
        title: '操作',
        dataIndex: 'operation',
        key: 'operation',
        align: "center"
    },
]
// 表格分页配置
export const paginationObj = computed<PaginationConfig>(() => {
    return {
        current: prettyStore.prettyInfo.page_info.current_page,
        defaultPageSize: PRETTY_LIST_DEFAULT_PAGE_SIZE,
        pageSize: prettyStore.prettyInfo.page_info.page_size,
        total: prettyStore.prettyInfo.page_info.total_count,
        onChange: async (current_page, page_size) => {
            isLoading.value = true
            await prettyStore.requestPrettyListAction({
                current_page,
                page_size
            })
            isLoading.value = false
        }
    }
})
